<template>
	<div class="city-list" ref="wrapper">
		<div>
			<div class="area">
				<div class="title">当前城市</div>
				<div class="button-list">
					<div class="button-wrapper active-city">
						<div class="button">{{this.currentCity}}</div>
					</div>
				</div>
			</div>
			<div class="area">
				<div class="title">热门城市</div>
				<div class="button-list">
					<div class="button-wrapper" 
					v-for="item of hotcities"
					 :key="item.id"
					 @click="handleCityClick(item.name)"
					 >
						<div class="button">{{item.name}}</div>
					</div>
				</div>
			</div>
			<div class="area" 
			v-for="(item,key) of cities" 
			:key="key"
			:ref="key"
			>
				<div class="title">{{key}}</div>
				<div class="item-list">
					<div 
					class="item"
					v-for="innerItem of item"
					:key="innerItem.id"
					@click="handleCityClick(innerItem.name)"
					>
						{{innerItem.name}}
					</div>
					
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import Bscroll from 'better-scroll';
import {mapState,mapMutations} from 'vuex'
export default{
	props:{
		hotcities:Array,
		cities:Object,
		letter:String
	},
	data(){
		return{

		}
	},
	computed:{
		...mapState({
			currentCity:'city'
		})
	},
	mounted(){
		this.scroll=new Bscroll(this.$refs.wrapper);
	},
	methods:{
		handleCityClick(city){
			// this.$store.dispatch('changeCity',city);
			// this.$store.commit('changeCity',city);
			this.changeCity(city);
			this.$router.push('/');
		},
		...mapMutations(['changeCity'])
	},
	watch:{
		letter(){
			if(this.letter){
				const element=this.$refs[this.letter][0];
				this.scroll.scrollToElement(element)
			}
		}
	}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/base.scss';
.active-city .button{
	border-color:$bgColor;
}
.city-list{
	position: absolute;
	top:px2rem(75px);
	left:0;
	right:0;
	bottom:0;
	/*background-color: red;*/
	overflow: hidden;
}
.title{
	height:px2rem(22px);
	line-height: px2rem(22px);
	background-color: #eee;
	padding-left:px2rem(10px);
	font-size: px2rem(13px);
	color:#666;
	border-bottom: 1px solid #ccc;
}
.button-list{
	padding-top:px2rem(10px);
	padding-bottom:px2rem(10px);
	padding-left:px2rem(10px);
	padding-right:px2rem(40px);
	overflow: hidden;
}
.button-wrapper{
	float: left;
	width:33.33%;
}
.button{
	text-align: center;
	margin:px2rem(10px);
	border:1px solid #777;
	padding-top:px2rem(5px);
	padding-bottom: px2rem(5px);
}
.item-list .item{
	height:px2rem(32px);
	line-height:px2rem(32px) ;
	color:#444;
	font-size: px2rem(8px);
	padding-left: px2rem(10px);
	border-bottom: 1px solid #ccc;
}
</style>